<template>
	<view v-if="level">
		<u-gap height="8"></u-gap>
		<view class="my-cell align-center text-xl text-bold">
			企大咖微名片{{level.level_name}}
		</view>
		<u-gap height="8"></u-gap>
		
		<u-cell-group>
			<u-cell-item title="服务周期" :value="`${level.duration}天`" :arrow="false"></u-cell-item>
			<u-cell-item title="服务单价" :value="`￥${level.level_price}`" :arrow="false"></u-cell-item>
		</u-cell-group>
		<view class="my-cell flex-row justify-end align-center">
			<view>实付款：</view>
			<view class="text-red text-bold">￥{{level.level_price}}</view>
		</view>
		
		<view class="padding-tb-xl">
			<my-btn width="400" radius @click="upgrade">确认支付</my-btn>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				level: ''
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.getDetail()
		},
		methods: {
			async getDetail() {
				let res = await this.$u.get('/level/detail?id=' + this.id)
				let { level } = res.data.result
				this.level = level
			},
			async upgrade() {
				let res = await this.$u.get('/level/upgrade?id=' + this.id)
				let { wechat } = res.data.result
				
				uni.requestPayment({
					provider: 'wxpay',
					...wechat,
					success: (res) => {
						console.log(res)
            this.$goto('/pages/mine/index', 'relaunch')
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-cell {
		background: #fff;
		width: 100%;
		height: 106rpx;
		padding: 26rpx 32rpx;
	}
</style>
